{% extends 'layout.html' %} {% block title %}{{title}}{% endblock %} {% block
head %}
<link rel="stylesheet" type="text/css" href="stylesheets/index.css" />

<script src="javascripts/index.js"></script>
{% endblock %} {% block content %}

<button id="createbtn" type="button" class="btn btn-primary mb-3">
  添加图书
</button>

<table class="table">
  <thead class="thead-dark">
    <tr>
      <th scope="col">#</th>
      <th scope="col">书名</th>
      <th scope="col">作者</th>
      <th scope="col">类目</th>
      <th scope="col">ISBN</th>
      <th scope="col">简介</th>
      <th scope="col">操作</th>
    </tr>
  </thead>

  <tbody>
    {% for book in datas %}
    <tr>
      <th scope="row">{{book.id}}</th>
      <td>{{book.name}}</td>
      <td>{{book.author}}</td>
      <td>{{book.subject}}</td>
      <td>{{book.ISBN}}</td>
      <td>{{book.describe}}</td>
      <td>
        <div class="btn-group" role="group" aria-label="Basic example">
          <button type="button" class="btn btn-primary btn-sm">查看</button>
          <button type="button" class="btn btn-light btn-sm">编辑</button>
          <button
            data-id="{{book.id}}"
            type="button"
            class="btn btn-light btn-sm delete-btn"
          >
            删除
          </button>
        </div>
      </td>
    </tr>
    {% endfor %}
  </tbody>
</table>

<nav aria-label="Page navigation example">
  <ul class="pagination">
    <li class="page-item"><a class="page-link" href="#">Previous</a></li>
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item"><a class="page-link" href="#">2</a></li>
    <li class="page-item"><a class="page-link" href="#">Next</a></li>
  </ul>
</nav>

<script>
  $(".delete-btn").click((e) => {
    e.preventDefault();
    const id = e.target.dataset.id;

    $.ajax({
      url: "/delete",
      type: "GET",
      data: { id },
      success(res) {
        if (res.success) {
          alert("删除成功");
          window.location.reload();
        } else {
          alert("删除失败");
        }
      },
    });
  });

  $("#createbtn").click(() => {
    location.href = "/create";
  });
</script>
{% endblock %}
